<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {home} from "@/api/home.ts";
import {ElMessage, ElMessageBox, FormInstance} from 'element-plus';

onMounted(() => {
  getPoltType()
})
const typeList = reactive<any[]>([])

const getPoltType = () => {
  home.getPoltType().then((res) => {
    console.log(res.data)
    typeList.push(...res.data)
  })
}

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  name: '',
  description: ''
})

const handleAdd = (index: number, row: any) => {
  dialogFormVisible.value = true
}

const okToAdd = () => {
  typeList.length = 0; // 清空视频列表
  home.getAddPoltType(form.name, form.description).then((res) => {
    console.log(res)
    ElMessage.success('添加成功！');
    getPoltType()
    // 清空表单数据
    form.name = '';
    form.description = '';
    ruleFormRef.value?.resetFields(); // 重置表单校验状态
    dialogFormVisible.value = false; // 关闭对话框
  })
}

const handleDelete = (index: number, row: any) => {
  ElMessageBox.confirm(
      `确定要删除${row.name}吗？`,
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        console.log(row.id)
        typeList.length = 0; // 清空视频列表
        home.getDeletePoltType(row.id).then((res) => {
          console.log(res)
          ElMessage.success('删除成功！');
          getPoltType()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '删除失败！',
        })
      })
}


const putDialog = ref(false)
const modifyTheType = reactive({
  id: '',
  name: '',
  description: ''
})
const handleModify = (index: number, row: any) => {
  putDialog.value = true
  modifyTheType.id = row.id
  modifyTheType.name = row.name
  modifyTheType.description = row.description
}

const okToModify = () => {
  typeList.length = 0; // 清空视频列表
  home.getModifyPoltType(modifyTheType.id, modifyTheType.name, modifyTheType.description).then((res) => {
    ElMessage.success('更新成功！');
    putDialog.value = false
    getPoltType()
  })
}

// 添加表单校验规则
const rules = reactive({
  id: [
    {required: true, message: 'id不能为空', trigger: 'blur'},
  ],
  name: [
    {required: true, message: '名称不能为空', trigger: 'blur'},
  ],
  description: [
    {required: true, message: '描述不能为空', trigger: 'blur'},
  ]
})
const ruleFormRef = ref()
// 添加提交表单的方法
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      okToAdd()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const putFormRef = ref()
const submitPutForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      okToModify()
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<template>
  <div>
    <el-row class="rounded-box">
      <el-col :span="24">
        <el-button class="add-button" type="primary" @click="handleAdd">增加</el-button>
      </el-col>
    </el-row>
    <div class="margin-top"></div>
    <el-row class="rounded-box">
      <el-col :span="24">
        <el-table ref="multipleTableRef" :data="typeList" style="width: 100%">
          <el-table-column prop="name" label="名称" width="180"/>
          <el-table-column label="操作" width="280">
            <template #default="scope">
              <div class="button-container">
                <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                <el-button type="warning" size="small" @click="handleModify(scope.$index, scope.row)">修改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog v-model="dialogFormVisible" title="新增类型">
      <el-form :model="form" :rules="rules" ref="ruleFormRef">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth" prop="description">
          <el-input v-model="form.description" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="putDialog" title="修改类型">
      <el-form :model="modifyTheType" :rules="rules" ref="putFormRef">
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="modifyTheType.id" autocomplete="off" prop="id"/>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="modifyTheType.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth" prop="description">
          <el-input v-model="modifyTheType.description" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="putDialog = false">取消</el-button>
          <el-button type="primary" @click="submitPutForm(putFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.rounded-box {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
}

.margin-top {
  margin-top: 20px;
}

.add-button {
  bottom: 30px;
}
</style>